<template>
  <div id="404plane">
    <iframe id='bdIframe' :src="randomUrl" frameborder="0" scrolling="no" style="width: 100%;height:100%" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      urlList: [
        '404-plane/index.html',
        '404-broke/index.html',
        '404-fight/index.html',
        '404-monster/index.html'
      ]
    }
  },
  computed: {
    randomUrl() {
      let index = Math.floor(Math.random() * (this.urlList.length))
      console.log(index)
      if(index>this.urlList.length-1||index<0){
          index=0;
      }
      return this.urlList[index]
    }
  },
  mounted() {
    const oIframe = document.getElementById('bdIframe')
    const deviceWidth = document.documentElement.clientWidth
    const deviceHeight = document.documentElement.clientHeight
    oIframe.style.width = Number(deviceWidth) + 'px'
    oIframe.style.height = Number(deviceHeight) + 'px'
  }
}
</script>
